<template>
  <div class="withdraw-config gray-box top-redius border-bottom-gray">
    <div class="title">
      {{ $t('allinpay.merchantWithdrawalSettings') }}
      <el-tooltip
        class="item"
        effect="dark"
        :content="$t('allinpay.withdrawalTip1')"
        placement="right"
      >
        <span>
          <el-icon><QuestionFilled /></el-icon>
        </span>
      </el-tooltip>
    </div>
    <el-form
      ref="dataFormRef"
      label-width="180px"
      class="set-form"
      label-position="left"
      :model="dataForm"
      @submit.prevent
    >
      <!-- 单笔提现 -->
      <el-form-item
        :label="$t('withdraw.eachWithdrawal')"
        style="width:640px"
      >
        <el-input
          v-model.trim="dataForm.withdrawCashLeast"
          style="width: 180px"
          maxlength="10"
          @blur="
            handleValue(
              dataForm.withdrawCashLeast,
              dataForm.withdrawCashMax || 20000,
              'min'
            )"
        >
          <template #append>
            {{ $t('distribution.dbcTip2') }}
          </template>
        </el-input>
        <span class="input-tips"> {{ $t('withdraw.tip2') }} </span>
        <el-input
          v-model.trim="dataForm.withdrawCashMax"
          style="width: 180px"
          maxlength="10"
          @blur="
            handleValue(
              dataForm.withdrawCashMax,
              20000,
              'max'
            )"
        >
          <template #append>
            {{ $t('distribution.dbcTip2') }}
          </template>
        </el-input>
        <div class="tips">
          {{ $t('withdraw.tip3') }}
        </div>
      </el-form-item>
      <!-- 提现频次 -->
      <el-form-item :label="$t('withdraw.withdrawalFrequency')">
        <el-select
          v-model="dataForm.frequency"
          :placeholder="$t('allinpay.pleaseSelect')"
        >
          <el-option
            :label="$t('withdraw.weekly')"
            :value="1"
          />
          <el-option
            :label="$t('withdraw.monthly')"
            :value="2"
          />
          <el-option
            :label="$t('withdraw.yearly')"
            :value="3"
          />
        </el-select>

        <el-input
          v-model.trim="dataForm.number"
          style="width: 180px; display: inline-black"
          @blur="handleEdit(dataForm.number)"
        >
          <template #append>
            {{ $t('distribution.bcTip4') }}
          </template>
        </el-input>
      </el-form-item>
      <!-- 提现设置end -->
      <el-button
        size="small"
        @click="dataFormSubmit()"
      >
        {{ $t('sysManagement.save') }}
      </el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, reactive, toRefs } from 'vue'

const Data = reactive({
  dataForm: {
    withdrawCashLeast: '',
    withdrawCashMax: '',
    frequency: '',
    number: ''
  }
})

onMounted(() => {
  getData()
})

const { dataForm } = toRefs(Data)

const dataFormRef = ref()
// 获取数据
const getData = () => {
  dataFormRef.value.resetFields()
  http({
    url: http.adornUrl('/shop/shopWithdrawCash/getWithdrawCash'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    Data.dataForm = data
  })
}

// 提交表单
const dataFormSubmit = () => {
  dataFormRef.value.validate((valid) => {
    if (valid) {
      const params = {
        withdrawCashLeast: Data.dataForm.withdrawCashLeast,
        withdrawCashMax: Data.dataForm.withdrawCashMax == null ? null : Data.dataForm.withdrawCashMax,
        frequency: Data.dataForm.frequency,
        number: Data.dataForm.number
      }
      http({
        url: http.adornUrl('/shop/shopWithdrawCash/save'),
        method: 'post',
        data: http.adornData(params)
      }).then(() => {
        ElMessage({
          message: $t('allinpay.saveSuccess'),
          type: 'success',
          duration: 1500
        })
      })
    }
  })
}

const handleValue = (data, max, type) => {
  // 表格
  if (data > max) {
    if (type === 'max') {
      Data.dataForm.withdrawCashMax = max
    } else if (type === 'min') {
      Data.dataForm.withdrawCashLeast = max
    }
    return
  }
  let tmpVal = data.replace(/[^\d^\\.]/g, '')
  const reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
  if (!reg.test(tmpVal)) {
    tmpVal = tmpVal + ''
    tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
    const n = (tmpVal.split('.')).length - 1
    if (n > 1) {
      tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
    }
  }
  if (type === 'max') {
    Data.dataForm.withdrawCashMax = tmpVal
  } else if (type === 'min') {
    Data.dataForm.withdrawCashLeast = tmpVal
  }
}

const handleEdit = (e) => {
  let val = parseInt(e || 1)
  if (e > 1000000) val = 999999
  if (e < 1) val = 1
  Data.dataForm.number = val
}

</script>

<style lang="scss" scoped>

</style>
